<template>
  <div>
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="addOrEditNonOilDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="nonOilClassform"
          ref="nonOilClassformRef"
          :rules="nonOilClassformRule"
        >
          <el-form-item
            label="分类名称"
            :label-width="formLabelWidth"
            prop="categoryName"
          >
            <el-input
              v-model="nonOilClassform.categoryName"
              autocomplete="off"
              :disabled="title === '查看分类'"
              size="small"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="上级分类"
            :label-width="formLabelWidth"
            prop="pid"
          >
            <treeselect
              v-model="nonOilClassform.pid"
              :options="categoryOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="上级分类"
              :disabled="title === '查看分类'"
            />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  AddNonOilCategoryApi,
  updateNonOilCategoryApi,
} from "@/api/nonOil/class";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "NonOilAddOrEditClass",
  props: {
    addOrEditNonOilDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "新增分类",
    },
    allCategoryListOption: {
      type: Array,
      default: () => [],
    },
    currentCategoryInfo: {
      type: Object,
      defaultL: () => {},
    },
  },
  components: { Treeselect },
  data() {
    let checkPid = (rule, value, callback) => {
      if (!this.nonOilClassform.pid) callback(new Error("请选择上级分类"));
      callback();
    };
    let checkName = (rule, value, callback) => {
      let name = this.nonOilClassform.categoryName.trim();
      this.nonOilClassform.categoryName = name;
      if (!name) callback(new Error("请输入分类名称"));
      callback();
    };
    return {
      formLabelWidth: "80px",
      nonOilClassform: {
        categoryName: "", //分类名称
        pid: null, // 父类id
      },
      nonOilClassformRule: {
        categoryName: [
          { required: true, validator: checkName, tigger: "blur" },
        ],
        pid: [{ required: true, validator: checkPid }],
      },
    };
  },
  computed: {
    categoryOptions() {
      return this.allCategoryListOption;
    },
  },
  watch: {
    currentCategoryInfo: {
      handler(val) {
        if (val.pid) {
          this.nonOilClassform.pid = Number(val.pid);
          this.nonOilClassform.categoryName = val.categoryName;
        }
      },
      deep: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:addOrEditNonOilDialog", false);
      this.resetForm("nonOilClassformRef"); // 这句好像没生效
      this.nonOilClassform.categoryName = "";
      this.nonOilClassform.pid = null;
    },
    handleSubmit() {
      this.$refs.nonOilClassformRef.validate((valid) => {
        if (valid) {
          if (this.currentCategoryInfo.categoryId) {
            const parmams = { ...this.nonOilClassform };
            parmams.categoryId = this.currentCategoryInfo.categoryId;
            updateNonOilCategoryApi(parmams).then((res) => {
              this.msgSuccess("编辑分类成功");
              this.handleClose();
              this.$emit("reloadDate");
            });
          } else {
            AddNonOilCategoryApi(this.nonOilClassform).then((res) => {
              this.msgSuccess("添加分类成功");
              this.handleClose();
              this.$emit("reloadDate");
            });
          }
        } else {
          console.log("error submit");
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.categoryId,
        label: node.categoryName,
        children: node.children,
      };
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .demo-drawer {
  overflow: auto;
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
  .el-drawer__body {
    padding: 20px;
  }
  .demo-drawer__footer {
    text-align: end;
  }
}
.vue-treeselect__placeholder,
.vue-treeselect__single-value {
  line-height: unset;
}
</style>
